<template>
  <div class="pie-echart">
    <BaseEcharts :options="options"></BaseEcharts>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, ref, computed } from "vue";
import { useStore } from "vuex";
import { defineComponent } from "vue";
import BaseEcharts from "@/base-ui/echarts";
import { IDataType } from "../types";
export default defineComponent({
  components: {
    BaseEcharts
  },
  // props: {
  //   pieData: IDataType[]
  // },
  setup(props) {
    components: {
      BaseEcharts;
    }
    const store = useStore();
    const options = {
      title: {
        left: "center"
      },
      tooltip: {
        trigger: "item"
      },
      legend: {
        orient: "vertical",
        left: "left"
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: "35%",
          data: [
            { value: 1048, name: "衣物" },
            { value: 735, name: "电子产品" },
            { value: 580, name: "书本" },
            { value: 484, name: "家电" },
            { value: 300, name: "玩具" }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    };
    // const options = computed(() => {
    //   return {
    //     title: {
    //       text: "Referer of a Website",
    //       subtext: "Fake Data",
    //       left: "center"
    //     },
    //     tooltip: {
    //       trigger: "item"
    //     },
    //     legend: {
    //       orient: "vertical",
    //       left: "left"
    //     },
    //     series: [
    //       {
    //         name: "Access From",
    //         type: "pie",
    //         radius: "50%",
    //         data: props.pieData,
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)"
    //           }
    //         }
    //       }
    //     ]
    //   }
    // });

    return {
      options
    };
  }
});
</script>
<style scoped lang="less"></style>
